<template>
	<a-card title="角色管理" :bordered="false">
		<!-- Card Header -->
		<template slot="extra">
			<a-form layout="inline" @submit.prevent="searchSubmit">
				<a-form-item><a-input v-model="searchForm.name" placeholder="角色名称"></a-input></a-form-item>
				<a-form-item><a-input v-model="searchForm.description" placeholder="角色描述"></a-input></a-form-item>
				<a-form-item>
					<a-select show-search placeholder="角色属性" allowClear showSearch v-model="searchForm.attribute" option-filter-prop="children" style="width: 200px">
						<a-select-option v-for="(item, index) in RoleAttributeOpt" :key="index" :value="item.value">{{ item.label }}</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item><a-button icon="search" type="primary" html-type="submit">搜索</a-button></a-form-item>
				<a-form-item><a-button icon="plus" type="danger" @click="openEdit()">新建</a-button></a-form-item>
			</a-form>
		</template>
		<a-table bordered :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination" :loading="loading" @change="handleTableChange">
			<template slot="attribute" slot-scope="text, record">
				<a-tag :color="text == '1' ? 'blue' : ''">{{ $exMod.findDict(RoleAttributeOpt, text) }}</a-tag>
			</template>
			<template slot="operation" slot-scope="text, record">
				<a @click="openEdit(record)">编辑</a>
				<a-divider type="vertical" />
				<a-popconfirm title="确定要删除这个角色吗?" @confirm="() => delRole(record)">
					<span><a href="javascript:void(0) ;">删除</a></span>
				</a-popconfirm>
			</template>
		</a-table>
		<EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord" />
	</a-card>
</template>
<script>
import { dictLoad } from '../../../util/internal.api';
import { pagination, roleTable } from '../public/colums';
import { roleList, roleDel } from '../public/http';
export default {
	components: {
		EditBox:()=>import('./edit.vue')


	},
	data() {
		return {
			editShow: false, //打开编辑器
			editRecord: {}, //正在编辑的记录
			dataSource: [],
			pagination: { ...pagination }, //复制预设的分页参数
			loading: false, //表格loading
			columns: roleTable, //表头管理
			searchForm: {
				name: '',
				description: '',
				attribute: ''
			},
			RoleAttributeOpt: []
		};
	},
	methods: {
		//1.0 获取表格数据
		getTableList() {
			this.loading = true;
			let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
			roleList(this.pagination, searchData).then(res => {
				this.loading = false;
				if (res.code === 0) {
					this.dataSource = res.data.result; //表格数据
					this.pagination.total = res.data.total; //总记录条数
				}
			});
		},
		//1.2翻页监听
		handleTableChange(pagination) {
			this.pagination.current = pagination.current;
			this.pagination.pageSize = pagination.pageSize;
			this.getTableList();
		},
		//2.0打开编辑器
		openEdit(obj = {}) {
			this.editRecord = obj;
			this.editShow = true;
		},
		//2.1 关闭编辑器
		closeEdit(e) {
			this.editShow = false;
			if (e.render) {
				this.getTableList();
			}
		},
		//3.0 搜索提交
		searchSubmit() {
			this.pagination.current = 1;
			this.getTableList();
		},
		//4.0删除角色
		delRole(record) {
			this.loading = true;
			roleDel(record.id).then(res => {
				if (res.code == 0) {
					//成功提醒
					this.$notification.success({
						message: '操作成功',
						description: res.message
					});
					this.getTableList();
				} else {
					//错误提醒
					this.$notification.warning(res.message);
				}
				this.loading = false;
			});
		},
		//数据初始化
		async init() {
			//1.1 获取表格数据
			await dictLoad('RoleAttribute').then(res => (this.RoleAttributeOpt = res));
			this.getTableList();
		}
	},
	created() {
		this.init();
	}
};
</script>
